<template>
	<scroll-view scroll-y="true" @scrolltolower="loadmore" lower-threshold='400'
	 class='recommend_page_scroll_view' style="padding: 0 30rpx;box-sizing: border-box;width: 100%;" >
		<block v-if="list.length && status !== 3">
			<block  v-for="(item,index) in list">
				<!-- 广告,因为需要在渲染时才知道应该插入哪一条广告,所以做到这里面来渲染 -->
				<view class="" v-if='index != 0 && index % 4 === 0 && !!adList[index / 4 - 1]' :key='adList[index / 4 - 1].id'>
					<!-- <template> -->
						<view class="item_box no_top" 
						 :key='index' @click="navDetail(adList[index / 4 - 1])"
						 >
							<view class="item_title_noimg">
								{{adList[index / 4 - 1].topic}}
							</view>
							<view class="item_img flex_v_venter"  style="position: relative;" >
								<image 
									class='video_poster' :src='adList[index / 4 - 1].headImage' mode="widthFix"></image>
							</view>
							
							<view class="flex_v_venter">
								<view class="flex_v_venter">
									<!-- <view class="tag st" v-for='(cur,i) in adList[index / 4 - 1].tags.split(",")' :key='i'>
										{{cur}}
									</view> -->
									<view class="tag st">
										广告
									</view>
								</view>
								<view class="from">
									{{adList[index / 4 - 1].sourceName}}
								</view>
								<view class="time">
									{{showtime(adList[index / 4 - 1].articlePublishTime)}}
								</view>
							</view>
						</view>
					<!-- </template> -->
				</view>
				<!-- 新闻 -->
				<view class="" :key='item.id'>
					<!-- <template> -->
						<view class="item_box no_top" 
						 :key='index' @click="navDetail(item)"
						 >
							<view class="item_title_noimg">
								{{item.topic}}
							</view>
							<view class="item_img flex_v_venter"  style="position: relative;" v-if="item.miniimg">
								<view class="flex_center"  v-if='item.coverType==="video"' style="z-index:9;position: absolute;margin: auto;top: 0;left: 0;height: 100%;width: 100%;">
									<i class='icon-start iconfont flex_center' style='width:100rpx;height:100rpx;color: #fff;font-size: 40rpx;background: rgba(0,0,0,0.6);border-radius: 50%;'></i>
								</view>
								<image v-if='item.coverType==="video"' 
									class='video_poster' :src='JSON.parse(item.miniimg)[0].src' mode="widthFix"></image>
								<image v-if='item.coverType==="2"' 
									class='video_poster' :src='JSON.parse(item.miniimg)[0].src' mode="widthFix"></image>
								<template v-if='item.coverType==="4"'>
									<image  class='img_poster_3' v-for='img in JSON.parse(item.miniimg)' :src='img.src' :key='img.src' mode="widthFix"></image>
								</template>
							</view>
							
							<view class="flex_v_venter">
								<view class="flex_v_venter" v-if="item.tags">
									<!-- <view class="tag st" v-for='(cur,i) in item.tags.split(",")' :key='i'>
										{{cur}}
									</view> -->
									<view class="tag st">
										{{item.tags.split(",")[0]}}
									</view>
								</view>
								<view class="from">
									{{item.sourceName}}
								</view>
								<view class="time">
									{{showtime(item.articlePublishTime)}}
								</view>
							</view>
						</view>
					<!-- </template> -->
				</view>
			</block>
		</block>
		
		<view class="skelect_css" v-for="item in 1" :key='item' v-if='!list.length && status !== 3'>
			<lkSkeleton style='width:750rpx'></lkSkeleton>
			<lkSkeleton style='width:500rpx;margin:10rpx 0 10rpx'></lkSkeleton>
			<view class="flex_v_venter flex_r_between">
				<lkSkeleton style='width:33%;' height='150rpx'></lkSkeleton>
				<lkSkeleton style='width:33%' height='150rpx'></lkSkeleton>
				<lkSkeleton style='width:33%' height='150rpx'></lkSkeleton>
			</view>
			<view class="flex_v_venter">
				<lkSkeleton style='width:100rpx;margin:10rpx 0 10rpx'></lkSkeleton>
				<lkSkeleton style='width:100rpx;margin:10rpx 0 10rpx 20rpx'></lkSkeleton>
				<lkSkeleton style='width:100rpx;margin:10rpx 0 10rpx 20rpx'></lkSkeleton>
			</view>
		</view>
		<view class='no_data' v-if='status === 3'>暂无数据</view>
		<!-- <view class="item_box">
			<view class="item_title_noimg">
				习近平主持召开经济社会领域专家座谈会习近平主持召开经济社会领域专家座谈会
			</view>
			<view class="flex_v_venter">
				<view class="tag">
					置顶
				</view>
				<view class="from">
					央视网
				</view>
				<view class="time">
					12小时前
				</view>
			</view>
		</view>
		<view class="item_box">
			<view class="item_title_noimg">
				习近平主持召开经济社会领域专家座谈会习近平主持召开经济社会领域专家座谈会
			</view>
			<view class="flex_v_venter">
				<view class="tag">
					置顶
				</view>
				<view class="from">
					央视网
				</view>
				<view class="time">
					12小时前
				</view>
			</view>
		</view>
		<view class="item_box no_top">
			<view class="item_title_noimg">
				从古至今,中国人为什么从不吃猫肉?专家说:和迷信关系特别大!
			</view>
			<view class="item_img flex_v_venter">
				<image :src="item" mode="" v-for='(item,index) in imgList' :key='index'></image>
			</view>
			<view class="flex_v_venter">
				<view class="from">
					央视网
				</view>
				<view class="time">
					12小时前
				</view>
			</view>
		</view>
		<view class="item_box no_top">
			<view class="item_title_noimg">
				熊与鸭相争
			</view>
			<video src="https://www.runoob.com/try/demo_source/movie.mp4" @error="videoErrorCallback" autoplay="true" controls></video>
			<view class="flex_v_venter">
				<view class="from">
					央视网
				</view>
				<view class="time">
					12小时前
				</view>
			</view>
		</view>
		<view class="item_box no_top">
			<view class="item_title_noimg">
				从古至今,中国人为什么从不吃猫肉?专家说:和迷信关系特别大!
			</view>
			<view class="item_img flex_v_venter">
				<image :src="item" mode="" v-for='(item,index) in imgList' :key='index'></image>
			</view>
			<view class="flex_v_venter">
				<view class="from">
					央视网
				</view>
				<view class="time">
					12小时前
				</view>
			</view>
		</view>
		<view class="item_box no_top">
			<view class="item_title_noimg">
				从古至今,中国人为什么从不吃猫肉?专家说:和迷信关系特别大!
			</view>
			<view class="item_img flex_v_venter">
				<image :src="item" mode="" v-for='(item,index) in imgList' :key='index'></image>
			</view>
			<view class="flex_v_venter">
				<view class="from">
					央视网
				</view>
				<view class="time">
					12小时前
				</view>
			</view>
		</view>
		<view class="item_box no_top">
			<view class="item_title_noimg">
				从古至今,中国人为什么从不吃猫肉?专家说:和迷信关系特别大!
			</view>
			<view class="item_img flex_v_venter">
				<image :src="item" mode="" v-for='(item,index) in imgList' :key='index'></image>
			</view>
			<view class="flex_v_venter">
				<view class="from">
					央视网
				</view>
				<view class="time">
					12小时前
				</view>
			</view>
		</view> -->
		<view :class="['flex_center','bottom_css']" v-if="list.length > 0"> <i style='font-size: 28rpx;color:#333' v-if='status == 1 || status == 2' :class="{'lk-icon-cry':status == 2,'lk-icon-loading':status == 1,'iconfont-lk':true}"></i><text style="margin: 0 0 1px 5rpx;">{{getBottom(status)}}</text></view>
	</scroll-view>
</template>

<script>
	import lkSkeleton from '../../../../lk-componts/componts/lk-skeleton.vue'
	import lkTag from '../../../../lk-componts/componts/lk-tag.vue'
	export default {
		data() {
			return {
				imgList: ['../../static/img/cat.jpg'],
				timer:null,
				selfList: [],
				selfAdList: []
			};
		},
		props: {
			type:{
				type:Number,
				default:0
			},
			list: {
				type: Array,
				default: () => []
			},
			adList: {
				type: Array,
				default: () => []
			},
			status: Number
		},
		watch:{
			
		},
		components:{
			lkSkeleton,lkTag
		},
		computed: {
			getBottom(){
				return (status) => {
					return status == 2 ? '没有更多数据了' : ( status == 1 ? '加载中' : '上拉加载更多')
				}
			},
			utilList(){
				return (arr,index) => {
					return JSON.parse(arr)
				}
			},
			getImgCss(){
				return (w,h,num) => {
					let css = {}
					switch (num){
						case 1:
							css = {
								width:'100%',
								// height:h / w+'rpx'
							}
							break;
						case 2:
							css = {
								width:'50%',
								// height:h+'rpx',
							}
							break;
						default:
							css = {
								width:'33.3%',
								// height:h+'rpx'
							}
							break;
					}
					return css
				}
			},
		},
		methods: {
			showtime(time) {
				let date =
					typeof time === "number" ?
					new Date(time) :
					new Date((time || "").replace(/-/g, "/"));
				let diff = (new Date().getTime() - date.getTime()) / 1000;
				let dayDiff = Math.floor(diff / 86400);
			
				let isValidDate =
					Object.prototype.toString.call(date) === "[object Date]" &&
					!isNaN(date.getTime());
			
				if (!isValidDate) {
					window.console.error("不是有效日期格式");
				}
				const formatDate = function(date) {
					let today = new Date(date);
					let year = today.getFullYear();
					let month = ("0" + (today.getMonth() + 1)).slice(-2);
					let day = ("0" + today.getDate()).slice(-2);
					let hour = today.getHours();
					let minute = today.getMinutes();
					let second = today.getSeconds();
					// return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
					return `${year}-${month}-${day}`;
				};
				if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31) {
					return formatDate(date);
				}
				return (
					(dayDiff === 0 &&
						((diff < 60 && "刚刚") ||
							(diff < 120 && "1分钟前") ||
							(diff < 3600 && Math.floor(diff / 60) + "分钟前") ||
							(diff < 7200 && "1小时前") ||
							(diff < 86400 && Math.floor(diff / 3600) + "小时前"))) ||
					(dayDiff === 1 && "昨天") ||
					(dayDiff < 7 && dayDiff + "天前") ||
					(dayDiff < 31 && Math.ceil(dayDiff / 7) + "周前")
				);
			},
			navDetail(data){
				if (data.coverType == 'video') {
					 // this.$ajax('/news/detail?id='+ data.id, {}, 'get').then(res => {
						//  let obj = JSON.parse(res.data.obj).data
						//  // uni.navigateTo({
						//  // 	url:'/pages/index/detail?url='+obj.videoShare
						//  // })
					 // })
					uni.navigateTo({
						url:'/pages/index/video-detail?url='+ encodeURIComponent(data.url) + '&id=' + data.id
					})
				} else {
					// console.log()
					uni.navigateTo({
						url:'/pages/index/detail?url='+ encodeURIComponent(data.url) + '&id=' + data.id
					})
				}
				// else if (data.type==='ad') {
				// 	location.href=data.url
				// }
			},
			loadmore() {
				this.$emit('loadmore')
				// this.status = 1
				// setTimeout(() => {
				// 	if(this.list.length > 50){
				// 		this.status = 2
				// 		return false
				// 	}
				// 	this.list = this.list.concat(this.list.slice(0,10))
				// },1500)
			},
		},

	}
</script>

<style lang="scss">
	.recommend_page_scroll_view{
		display: flex;
		flex-direction: column;
		height: 100%;
	}
	.video_poster{
		background: #C8C7CC;
		width: 100%;
	}
	.img_poster_2{
		width:'50%',
	}
	.img_poster_3{
		background: #C8C7CC;
		width:'33.3%',
	}
	.skelect_css{
		margin: 20rpx 0 0;
		height: 50rpx;
		padding: 0 0 15rpx;
		border-bottom: 1px solid #F2F2F2;
	}
	.no_data{
		margin-top: 200rpx;
		padding: 40rpx;
		font-size: 30rpx;
		color: #C0C0C0;
		text-align: center;
	}
	.bottom_css{
		font-size: 25rpx;
		color: #333;
		height: 70rpx;
		margin: 10rpx 0 0;
		border-top: 1px solid #F2F2F2;
	}
	.item_box {
		// border-bottom: 1px solid #EDEDED;
		padding: 15rpx 0;

		.item_title_noimg {
			font-size: 28rpx;
			color: #333;
			margin: 0 0 15rpx;
		}

		.tag {
			font-size: 15rpx;
			background: rgba(255, 0, 0, 0.1);
			padding: 3rpx 10rpx;
			color: #f00;
			border-radius: 7rpx;
			margin: 0 20rpx 0 0;
		}
		.st{
			background: rgba(0,153,255,0.1);
			color: rgba(0,153,255,0.5);
		}

		.from {
			font-size: 18rpx;
			color: #999;
			margin: 0 20rpx 0 0;
		}

		.time {
			font-size: 18rpx;
			color: #999;
		}
	}
	@keyframes getOp{
		from{
			opacity: 0 ;
			height: 140rpx;
			// width: 0;
		}50%{
			// opacity: 0.1;
			// height: auto;
		}to{
			opacity: 1;
		}
	}
	.item_img{
		background: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.item_img>image {
		margin: 0 0 10rpx;
		// height: 160rpx; 
		display:block;
		
		// height: auto; 
		// transition: all 1s;
		animation: getOp 1s;
		&:nth-child(2) {
			margin: 0 10rpx 10rpx;
		}
	}

	.no_top {
		border-top: 1px solid #EDEDED;
	}

	video {
		width: 100%;
	}
</style>
